<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script type="application/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="application/javascript" th:src="@{/js/jquery-3.6.0.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/login.css}"/>
</head>
<body>
<div class="bgimg"></div>

<div class="layui-row">

    <div class="layui-col-xs4 layui-col-xs-offset7">
        <div class="loginBox">
            <div style="margin: 0px 0px 35px 0px"><label class="loginlabel">SMBMS系统登陆</label></div>
            <p th:text="${msg}"></p>
            <form class="layui-form loginform" action="/login" method="post" onsubmit="return verify()">
                <div class="layui-form-item">
                    <label class="layui-form-label" style="color: white">账户</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="color: white">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" style="color: white;">验证码</label>
                    <div class="layui-input-inline" style="display: inline-block;">
                        <input type="text" name="captcha" id="captcha" required  lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                        <p style="color: white">
                            注意：验证码五分钟内有效<br>
                            点击图片更换验证码
                        </p>
                    </div>
                    <div style="margin: 0px auto;width: 200px;height: 60px;display: inline-block;">
                        <img id="verifyImg" th:src="@{/getCaptchaImg}" style="display: inline-block;" onclick="changeCode()">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
                        <button type="reset" class="layui-btn layui-btn-warm">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>

<script>
    function changeCode() {
        $("#verifyImg").attr('src','/getCaptchaImg?'+Math.random())
    }

    function verify() {
         var flag = false;
        $.post({
            url: "/verify",
            data: {"captcha":$("#captcha").val()},
            async: false,
            success: function (data) {
                if (data.code == 200){
                    flag = true;
                } else {
                    alert(data.message);
                }
            }
        })
        console.log(flag);
        return flag;
    }





</script>





</body>
</html>